<template>
	<view>
		<view style="position:relative;">
			<view class="select-view-class" @click="selectClick()">
				<view class="select-text-class">{{sourceTypeName}}</view>
				<image class="select-image-class" src="@/static/down-black.png"></image>
			</view>
			<view class="popup-view-box-model" v-if="isShowPopup">
				<view class="popup-view-box-3-model">
					<view class="popup-view-box-1-model">
						<view v-for="(item,index) in sourceTypeNameData" :key="index">
							<view class="popup-model-item-text" @click="sourceTypeClick(item)">{{item.source_type_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="popup-view-box-2-model" @click="popupClick()" />
			</view>

		</view>

		<input class="inputClass" @input="inputPhone" placeholder="请输入求购车型名称" placeholder-class="psc"
			v-model="inputCarValue" />

		<view class="queding-btn-view">
			<view class="confirm-text-view" @click="confirm()">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		getUsedSearchSourceType
	} from "@/api/brand.js";
	export default {
		data() {
			return {
				inputCarValue: '',
				isShowPopup: false,
				sourceTypeNameData: [

					{
						"source_type_id": '78498C3E-F152-D547-F4FB-0C531477B3D8',
						"source_type_name": '美版'
					},
					{
						"source_type_id": '78498C3E-F152-D547-F4FB-0C531477B3D8',
						"source_type_name": '欧版'
					}

				],
				sourceTypeName: '请选择求购类型',
				sourceTypeId: '',
				series_id: '',
				brand_id: '',
				series_one_id: '',
				brand_name: ''
			}
		},
		onLoad(option) {
			this.$utils.log("自定义车型  页面 option  " + JSON.stringify(option))
			if (option.series_id) {
				this.inputCarValue = option.custom_name
				this.series_id = option.series_id
				this.brand_id = option.brand_id
				this.series_one_id = option.series_one_id
				this.brand_name = option.brand_name
				var that = this
				getUsedSearchSourceType(this.series_id).then(res => {
					that.$utils.log("打印哪一个版本的数据  " + JSON.stringify(res))
					if (res.code == 0) {
						that.sourceTypeNameData = res.data
						that.sourceTypeName = that.sourceTypeNameData[0].source_type_name
						that.sourceTypeId = that.sourceTypeNameData[0].source_type_id
						that.$forceUpdate()
						that.$utils.log("打印哪一个版本的数据  " + JSON.stringify(that.sourceTypeNameData))
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		},
		methods: {
			selectClick() {
				if(this.sourceTypeNameData.length>0){
					if (this.isShowPopup) {
						this.isShowPopup = false
					} else {
						this.isShowPopup = true
					}
				}
			},
			sourceTypeClick(item) {
				this.sourceTypeName = item.source_type_name
				this.sourceTypeId = item.source_type_id
				this.isShowPopup = false
			},
			popupClick() {
				this.isShowPopup = false
			},
			inputPhone(e) {

			},
			confirm() {
				if (!this.sourceTypeId) {
					uni.showToast({
						title: '请选择求购类型',
						icon: 'none'

					})
					return
				}
				if(!this.inputCarValue){
					uni.showToast({
						title: '请输入求购车型名称',
						icon: 'none'
					})
					return
				}

				// 点击了确定按钮,回传数据到选择页面
				this.$utils.log('打印点击的item   ' + JSON.stringify(item))
				// 获取当前页上的栈（数组形式）
				var pages = getCurrentPages()
				//上上上一页面 
				var prevPage = pages[pages.length - 5]
				const item ={
					series_id: this.series_id,
					brand_id: this.brand_id,
					series_one_id: this.series_one_id,
					brand_name: this.brand_name
				}
				item.MID = 1
				item.custom = true
				item.models_one_id = this.sourceTypeId
				item.id = this.sourceTypeId
				item.version_id = this.sourceTypeId
				item.name = this.inputCarValue
				prevPage.$vm.backData(item) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack({
					delta: 4
				})


			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.select-view-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		padding: 30rpx 28rpx 28rpx 28rpx;
		background-color: white;
		margin-top: 14rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

	}

	.popup-model-item-text {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		padding: 30rpx 28rpx 28rpx 28rpx;
		background-color: white;
	}

	.popup-view-box-model {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 95rpx;
		z-index: 1000;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 100%;
		height: 3000rpx;
	}

	.popup-view-box-1-model {
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 100%;
		height: auto;
	}

	.popup-view-box-2-model {
		width: 100%;
		height: 200vh;
		background-color: #00000099;
	}

	.popup-view-box-3-model {
		width: 100%;
		height: auto;
		background-color: #00000099;
	}

	.select-text-class {}

	.select-image-class {
		width: 26.92rpx;
		height: 15.01rpx;
	}

	.inputClass {
		width: 100%;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0rpx;
		margin-top: 16rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
	}

	.psc {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.queding-btn-view {
		margin-top: 186rpx;
		padding: 0rpx 48rpx;
	}

	.confirm-text-view {
		height: 94rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 94rpx;
		color: #FFFFFF;
		opacity: 1;
		position: fixed;
		bottom: 80rpx;
		left: 50rpx;
		right: 50rpx;
	}
</style>